<template>
    <div class="todo-container">
        <section class="todoapp">
            <TodoXheader/>
            <TodoXsection/>
            <TodoXfooter/>
        </section>
        <footer class="info">
        <p>Double-click to edit a todo</p>
        <p>Written by <a href="javascript:;">Evan You</a></p>
        <p>Part of <a href="javascript:;">TodoMVC</a></p>
        </footer>
    </div>
</template>

<script>
import TodoXheader from "@/components/TodoXheader";
import TodoXsection from "@/components/TodoXsection";
import TodoXfooter from "@/components/TodoXfooter";
import { mapState, mapActions } from "vuex";
import { setTodoList , setAllDone} from "@/utils/localStorageTodo";
export default {
  methods: {
      ...mapActions('todolist',['setAllChecked'])
  },
  computed: {
    ...mapState("todolist", ["todoList"])
  },
  components: {
    TodoXheader,
    TodoXsection,
    TodoXfooter
  },
  watch: {
    todoList: {
      deep: true,
      handler(newVal) {
        setTodoList(newVal);
      }
    }
  }
};
</script>

<style scoped src="../assets/style/todolist.css">
/* @import url('../assets/style/todolist.css');  */
/* vue的style引入css，src和@import的区别？ */
/* @import方式引入css文件作用域是全局，src引入css文件作用域是可以指定局部作用域或者全局作用域 */
</style>

<style scoped>
.todo-container {
  width: 550px;
  height: 258.6px;
  margin: 0 auto;
}
</style>